<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="author" content="李愧愧">
    <title></title>
    <style>
        .box{
            width: 260px;
            height: 300px;
            box-sizing: border-box;
            padding: 10px;
            background-color: #eaeaea;
            margin: 0 auto;
        }
        .clearfix::after{
            clear: both;
            display: block;
            content: "";
        }
        ul{
            list-style: none;
            padding: 0;
        }
        li{
            float: left;
            background-color: #333;
            margin: 5px;
            width: 50px;
            height: 50px;
            box-sizing: border-box;
            padding: 5px 0;
        }
        p{
            margin: 0;
            padding: 0;
            color: #fff;
            font-weight: bold;
            text-align: center;
        }
        li:hover{
            background-color: #fff;
            border: 1px solid black;
        }
        li:hover p{
            color: #ff68b3;
        }
        .boxBottom{
            border: 1px solid white;
            width: 240px;
            height: 80px;
        }
        .boxBottom p{
            color: #666690;
            text-align: left;
        }
        .boxBottom span{
            color: #666;
        }
    </style>
</head>
<body>
    
    <div class="box">
        <div class="boxTop clearfix">
            <ul>
                <li>
                    <p>1</p>
                    <p>JUN</p>
                </li>
                <li>
                    <p>2</p>
                    <p>FEB</p>
                </li>
                <li>
                    <p>3</p>
                    <p>MAR</p>
                </li>
                <li>
                    <p>4</p>
                    <p>APR</p>
                </li>
                <li>
                    <p>5</p>
                    <p>MAY</p>
                </li>
                <li>
                    <p>6</p>
                    <p>JAN</p>
                </li>
                <li>
                    <p>7</p>
                    <p>JUL</p>
                </li>
                <li>
                    <p>8</p>
                    <p>AGU</p>
                </li>
                <li>
                    <p>9</p>
                    <p>SEP</p>
                </li>
                <li>
                    <p>10</p>
                    <p>OCT</p>
                </li>
                <li>
                    <p>11</p>
                    <p>NOV</p>
                </li>
                <li>
                    <p>12</p>
                    <p>DEC</p>
                </li>
            </ul>
        </div>
        <div class="boxBottom">
            <p>十月节日</p>
            <span></span>
        </div>
    </div>
<script>
    var msg = [
		"元旦：1月1日至3日放假三天。",
        "春节：2月2日至8日放假7天。",
        "妇女节：3月8日妇女节，与我无关。",
        "清明节：4月3日至5日放假3天",
        "劳动节：4月30日至5月2日放假3天。",
        "端午节：6月4日至6日放假3天。",
        "小暑：7月7日小暑。不放假。",
        "七夕节：8月6日七夕节。不放假。",
        "中秋节：9月10日至12日放假3天。",
        "国庆节：10月1日至7日放假7天。",
        "立冬：11月8日立冬。不放假。",
        "艾滋病日:12月1日<br />废除奴隶制国际日:12月2日。"
	];
    var lis = document.querySelectorAll('li');
    var bom = document.querySelector('.boxBottom span')
    console.dir(lis);
    console.dir(bom);

    for(var i=0; i< lis.length;i++){

        lis[i].index=i;
        console.dir(i);
        lis[i].onmousemove = function(ev){
            // for(var j=0;j<msg.length;j++){
                bom.innerHTML=msg[this.index];
            // }
            
        }
    }
</script>
</body>
</html>